<template>
  <div class="main">
    <DataCord @updatemess="updatemess" :userInfo="userInfo"></DataCord>
    <!-- 功能菜单 -->
    <div class="methodMeue">
        <!-- 作品 -->
        <div class="flex">
            <a href="javascript:;">
                <p>
                    <span style="color:rgb(59 167 52)" class="el-icon-camera-solid ic"></span>
                    <span class="icfont" @click="state=1;togger()">作品</span>
                </p>
            </a>
        </div>
        <!-- 日常 -->
        <div class="flex">
           <a href="javascript:;">  
            <p>
                <span style="color:#ffcd35" class="el-icon-sunrise-1 ic"></span>
                <span class="icfont">日常</span>
            </p>
           </a>
        </div>
        <!-- 收藏 -->
        <div class="flex" v-if="userInfo.isMy">
            <a href="javascript:;"> 
                <p>
                    <span style="color:#ffcd35" class="el-icon-star-on ic"></span>
                    <span class="icfont" @click="state=2;togger()">收藏</span>
                </p>
            </a>
        </div>
    </div>
    <div class="content">
        <!-- 左部分帖子有关 -->
        <div class="left">
            <el-divider>({{node==null?'0':node.length}})</el-divider>
            <el-empty v-if="node==null" description="空"></el-empty>
            <Node @del="del()" :isMy="userInfo.isMy"  v-for="item in node" :key="item.index" :node="item" v-else></Node>
            <button class="updateNode">查看更多</button>
        </div>  
        <!-- 右部分广告与认证 -->
        <div class="right">
            <Authentic></Authentic>
            <Attenton></Attenton>
        </div>
    </div>
  </div>
</template>

<script>
import DataCord from '@/components/dataCord/datacord'
import Attenton from '@/components/attention/attention'
import Authentic from '@/components/attention/authentic'
import Node from '@/components/node/node.vue'
export default {
    props:["id"],
    components:{DataCord,Node,Attenton,Authentic},
    data(){
        return{
            state:1,
            toggerCount:0,
            userInfo:{
                userName:null,
                userVip:true,
                userSv:null,
                userMess:"该用户太懒没有留下痕迹~~~",
                userBack:null,
                userHeader:null,
                isMy:false,
            },
            node:null
            // [
            //   {
            //     userName:null,
            //     userHeader:null,
            //     nodeTime:"2011-11-13 11:22:33",
            //     nodeLook:20,
            //     nodeId:null,
            //     nodeMess:"面相大海勇敢爱",
            //     nodeLike:100,
            //     arrImgs:[
            //     "https://ts1.cn.mm.bing.net/th?id=OIP-C.VP0E8Yo33976Q5TUwCptyQAAAA&w=99&h=100&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
            //     ]
            //   }
            // ]
        }
    },
      mounted(){
   document.documentElement.scrollTop=0
  },
    methods:{
        updatemess(va){
            // 修改描述
            this.$http.put("/user/usermess/"+va).then(va=>{
                this.$alert(va.data.message)
                
            })
        },
        togger(){
            if(this.toggerCount==5){
                this.$alert("请休息一下在进行切换")
                // 倒计时
                setTimeout(()=>{
                    this.toggerCount=0;
                },4000)
                return
            }
            switch(this.state){
                case 1:
                    this.initData()
                    break
                case 2:
                    this.initCollentData();
                    break
            }
            this.toggerCount++;
        },
        initCollentData(){
           this.$http.get("/collent/usercollents").then(va=>{
                 this.node=va.data.data
                 this.userInfo.isMy=false
            })
        },
        initData(){
            if(this.id=="my"){
                this.$http.get("/user/myDetils").then(va=>{
                    if(va!=null){
                        if(va.data.code==200){
                            this.userInfo=va.data.data.userInfo
                            this.userInfo.isMy=true
                            this.node=va.data.data.nodes
                            document.title=this.userInfo.userName+"的个人中心-waterghost"    
                            
                        }else{
                            this.$alert(va.data.message)
                        }
                    }
                })

            }else{
                this.$http.get("/user/myDetils/"+this.id).then(va=>{
                    if(va!=null){
                        if(va.data.code==200){
                            this.userInfo=va.data.data.userInfo
                            // this.userInfo.isMy=true
                            this.node=va.data.data.nodes
                            document.title=this.userInfo.userName+"的个人中心-waterghost"    
                            
                        }else{
                            this.$alert(va.data.message)
                        }

                    }
                })
            }
            
        },
        del(){
           this.initData()
        }
    },
    created(){
        if(this.id=="my"){
            // 检查是否登录
          if(sessionStorage.getItem("TOKEN")==null||sessionStorage.getItem("TOKEN")==""){
              this.$router.push("/")
              this.$alert("请进行登录")
          }else{
              this.initData();
           
          }

        }else{
            this.initData();
        }
         
    }
}   
</script>

<style scoped lang="less">

    .main{
        width: 60%;
        height: auto;
        background: #fff;
        margin: 0 auto;
        .methodMeue{
            width: 100%;
            height: 50px;
            padding:10px;
            display: flex;
            .flex{
                width: 10%;
                height: 100%;
                p{
                    line-height: 35px;
                }
                .ic{
                    font-size: 25px;
                }
                .icfont{
                    font-size: 15px;
                }
            }
        }
        .content{
            width: 100%;
            height: auto;
            // background: yellow;
            display: flex;
            .left{
                width: 60%;
                height: 100%;
                // background: pink;
            }
            .right{
                width: 40%;
                height: 100%;
                // background: orange;
            }
        }
    }
    
    .updateNode{
        background: #f9d268;
        border: none;
        width: 100px;
        height: 30px;
        border-radius: 10px;
        text-align: center;
        line-height: 30px;
        margin: 10px auto;
        display: block;
        cursor: pointer;
    }

     @media  screen and (max-width: 1300px) {
        .main{
            width: 100% !important;
        }
        .content{
            display: block !important;
        }
        .left{
            width: 100% !important;
            height: auto !important;
        }
        .right{
            width: 100% !important;
            height: auto !important;
        }
        .flex{
            width: 20% !important;
        }
     }

     @media  screen and (min-width: 1900px) {
         .left{
             width: 70% !important;
        }
        .rigth{
            width: 30% !important;
        }
         
     }
</style>